@import 'tailwindcss/theme';
@import 'tailwindcss/utilities';

@theme {
  --color-primary: #3665da;
  --color-primary-text: rgba(255, 255, 255, 0.85);
  --color-container-background: #141414;
  --color-border: #424242;
}

@layer components {
  .rarity-common-text-color {
    color: #dbdde1;
  }
  .rarity-inferior-text-color {
    color: #84a26e;
  }
  .rarity-medium-text-color {
    color: #5685ae;
  }
  .rarity-superior-text-color {
    color: #a362a8;
  }
  .rarity-supreme-text-color {
    color: #cd9f56;
  }
  .rarity-immortal-text-color {
    color: #de584f;
  }
  .rarity-perfect-text-color {
    color: #f2e36c;
  }
  .rarity-innate-text-color {
    background: linear-gradient(
      180deg,
      rgba(85, 220, 194, 1) 0%,
      rgba(109, 213, 224, 1) 50%
    );
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
  }
  .rarity-treasure-text-color {
    background: linear-gradient(
      135deg,
      rgba(241, 227, 106, 1) 5%,
      rgba(134, 204, 223, 1) 35%,
      rgba(215, 170, 221, 1) 65%,
      rgba(241, 178, 214, 1) 95%
    );
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
  }
}

body {
  background-color: #141414;
}
